<template>
  <view class="feedback-container">

    <!-- 搜索栏 -->
    <view class="search-bar-container">
      <uni-search-bar 
        v-model="queryParams.studentName" 
        placeholder="请输入学生姓名" 
        @input="handleQuery"
        :radius="12"
        cancelButton="none"
      />
    </view>

    <!-- 过滤选择器 -->
    <view class="filter-picker-container">
      <uni-data-picker 
        v-model="queryParams.classId" 
        :localdata="classOptions" 
        field="value" 
        text-field="label" 
        placeholder="请选择班级"
        @change="handleQuery"
      ></uni-data-picker>
    </view>

    <!-- 课后回馈列表 -->
    <uni-list class="feedback-list">
      <view 
        class="list-item-wrapper" 
        v-for="item in recordList" 
        :key="item.id"
        @click="handleItemClick(item)"
      >
        <uni-list-item 
          :title="item.studentName" 
          :note="`${item.courseName} ${item.createTime}`" 
          :thumb="item.filePathList[0]"
          thumb-size="lg"
          ellipsis="1"
        >
          <template v-slot:footer>
            <view class="item-score">
              <text class="score-text">{{ item.score ? '已评分' : '未评分' }}</text>
              <uni-rate 
                v-if="item.score" 
                :value="item.score" 
                :disabled="true" 
                :size="16"
                :colors="['#e4e7ed', '#ffd700', '#ffda33']"
              />
            </view>
          </template>
        </uni-list-item>
      </view>
      
      <uni-empty 
        v-if="recordList.length === 0" 
        text="暂无课后回馈数据" 
        mode="list"
      />
    </uni-list>
      
      <!-- 分页组件 -->
      <uni-pagination 
        v-if="total > 0" 
        :total="total" 
        :current="queryParams.pageNum" 
        :pageSize="pageSize" 
        @change="handlePageChange"
        show-icon
        size="small"
        prev-text="上一页"
        next-text="下一页"
        style="margin: 20px 0; text-align: center;"
      />

  </view>
</template>

<script>
  import request from '@/utils/request'

  export default {
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentName: '',
          classId: '',
          createTime: ''
        },
        // 班级选项
        classOptions: [],
        // 记录列表
        recordList: [],
        // 分页相关
        total: 0,
        pageSize: 10,
        // 遮罩层
        loading: false
      }
    },
    onLoad() {
      this.getList()
      this.getClassOptions()
    },
    onShow() {
      // 页面显示时刷新列表数据
      this.getList()
    },
    methods: {
      // 获取班级选项
      getClassOptions() {
        request({
          url: '/ysg/common/getClassOptions',
          method: 'GET'
        }).then(res => {
          if (res.code === 200 && res.data) {
            this.classOptions = res.data.map(item => ({
              value: item.value,
              text: item.label
            }))
          }
        }).catch(error => {
          console.warn('获取班级选项失败', error)
        })
      },
      
      // 查询列表
      getList() {
        this.loading = true
        // 设置分页参数
        this.queryParams.pageSize = this.pageSize
        
        request({
          url: '/ysg/work/getSignInRecords',
          params: this.queryParams,
          method: 'GET'
        }).then(res => {
          if (res.code === 200) {
            // 更新列表数据
            this.recordList = res.rows.map(item => {
              // 处理文件路径
              if (item.filePaths && item.filePaths != '[]') {
                try {
                  item.filePathList = JSON.parse(item.filePaths)
                } catch (e) {
                  item.filePathList = ['http://localhost:8080/profile/upload/2025/12/02/暂无图片_20251202142551A001.png']
                }
              } else {
                item.filePathList = ['http://localhost:8080/profile/upload/2025/12/02/暂无图片_20251202142551A001.png']
              }
              return item
            })
            // 更新总条数
            this.total = res.total || 0
          }
          this.loading = false
        }).catch(error => {
          console.warn('获取课后回馈列表失败', error)
          this.loading = false
          // 使用模拟数据
          this.recordList = [
            {
              id: 1,
              studentName: '张三',
              courseName: '油画入门第一课',
              className: '绘画初级课程',
              sort: 3,
              createTime: '2025-12-02 13:05:30',
              score: 5,
              comment: '表现优秀，色彩感知能力强',
              filePathList: []
            },
            {
              id: 2,
              studentName: '李四',
              courseName: '油画入门第一课',
              className: '绘画初级课程',
              sort: 3,
              createTime: '2025-12-02 13:06:15',
              score: 0,
              comment: '',
              filePathList: []
            }
          ]
          // 模拟总条数
          this.total = this.recordList.length
        })
      },
      
      // 搜索
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      
      // 分页变化事件
      handlePageChange(e) {
        this.queryParams.pageNum = e.current
        this.getList()
      },
      
      // 点击列表项，跳转到详情页
      handleItemClick(item) {
        // 跳转到课后回馈详情编辑页面
        this.$tab.navigateTo(
           `/pages/work/feedback-detail?id=${item.id}&studentId=${item.studentId}&studentName=${item.studentName}&courseName=${item.courseName}&className=${item.className}&courseId=${item.courseId || ''}&classId=${item.classId || ''}`
        )
      },
      

    }
  }
</script>
<style scoped>
  .feedback-container {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding: 0;
    margin: 0;
  }

  /* 搜索栏容器 */
  .search-bar-container {
    padding: 3px 8px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 0;
  }

  /* 确保搜索栏高度一致 */
  .uni-search-bar {
    height: 38px;
  }

  .uni-search-bar__input {
    height: 38px;
    line-height: 38px;
  }

  /* 过滤选择器容器 */
  .filter-picker-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    background-color: white;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0;
  }

  .filter-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
  }

  /* uni-data-picker 样式调整 */
  :deep(.uni-data-picker) {
    flex: 1;
  }

  :deep(.uni-data-picker__selector) {
    font-size: 13px;
    color: #333;
    padding: 6px 10px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    height: 32px;
    line-height: 16px;
    display: flex;
    align-items: center;
  }

  :deep(.uni-data-picker__placeholder) {
    color: #999;
  }

  /* 列表区域 */
  .feedback-list {
    background-color: white;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    margin: 0;
  }

  .list-header {
    background-color: #f5f7fa;
  }

  .item-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .score-text {
    font-size: 12px;
    color: #666;
  }

  /* 列表项包裹器样式 */
  .list-item-wrapper {
    display: block;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
  }

  .list-item-wrapper:active {
    background-color: #f5f7fa;
  }
  </style>